<template>
  <page-header-wrapper :title="false">
    <a-spin :spinning="loading" size="large">
      <div class="cardArea">
        <div class="titleArea">
          <div class="titleArea-label"></div>
          <div class="titleArea-content">{{ cardTitle }}</div>
        </div>
        <div class="tipsArea">
          <div class="tipsArea-content-add" v-if="this.$route.params.operation == 'add'">
            <div>1.创建表单，绑定数据实体</div>
            <div class="tipsArea-content-view-item">2.配置各个环节的表单字段</div>
            <div class="tipsArea-content-view-item">3.发布流程</div>
          </div>
          <div class="tipsArea-content-add" v-else>
            <div v-if="statistics.maxVersion">当前流程版本为{{ statistics.maxVersion }}号</div>
            <div v-if="statistics.currently" class="tipsArea-content-view-item">
              运行中的流程实例{{ statistics.currently }}个
            </div>
            <div v-if="statistics.complete" class="tipsArea-content-view-item">
              已完成的流程实例{{ statistics.complete }}个
            </div>
          </div>
        </div>

        <div class="stepArea">
          <!-- 步骤一 -->
          <div
            :class="completeIndex + 1 == 0 ? 'stepArea-item stepArea-item-border' : 'stepArea-item'"
            @click="start(0)"
          >
            <div class="stepArea-item-title">
              <img class="stepArea-item-name-img" src="@/assets/images/guide/flowchartImg.png" />
              <div class="stepArea-item-title-name">流程图</div>
            </div>
            <div class="stepArea-item-describe">
              流程图,直观地描述一个工作过程的具体步骤。流程图对准确了解事情是如何进行的，以及决定应如何改进过程极有帮助。
            </div>
            <a-divider />
            <div class="stepArea-item-button">
              <div v-if="completeIndex >= 0" class="stepArea-item-button-label button-complete-color">已完成</div>
              <div v-else-if="completeIndex + 1 == 0" class="stepArea-item-button-label button-tocomplete-color">
                待完成
              </div>
              <div v-else class="stepArea-item-button-label button-incomplete-color">未完成</div>
              <a-icon class="stepArea-item-button-icon" type="right" />
            </div>
          </div>

          <!-- 步骤二 -->
          <div
            :class="completeIndex + 1 == 1 ? 'stepArea-item stepArea-item-border' : 'stepArea-item'"
            @click="start(1)"
          >
            <div class="stepArea-item-title">
              <img class="stepArea-item-name-img" src="@/assets/images/guide/form.png" />
              <div class="stepArea-item-title-name">表单配置</div>
            </div>
            <div class="stepArea-item-describe">
              表单配置,可以录入数据，侧重于数据录入的过程，即按照预先设置好的路线进行流转，实现多人有顺序、有规则的完成一条数据的录入。
            </div>
            <a-divider />
            <div class="stepArea-item-button">
              <div v-if="completeIndex >= 1" class="stepArea-item-button-label button-complete-color">已完成</div>
              <div v-else-if="completeIndex + 1 == 1" class="stepArea-item-button-label button-tocomplete-color">
                待完成
              </div>
              <div v-else class="stepArea-item-button-label button-incomplete-color">未完成</div>
              <a-icon class="stepArea-item-button-icon" type="right" />
            </div>
          </div>

          <!-- 步骤三 -->
          <div
            :class="completeIndex + 1 == 2 ? 'stepArea-item stepArea-item-border' : 'stepArea-item'"
            @click="start(2)"
          >
            <div class="stepArea-item-title">
              <img class="stepArea-item-name-img" src="@/assets/images/guide/link.png" />
              <div class="stepArea-item-title-name">环节配置</div>
            </div>
            <div class="stepArea-item-describe">
              环节配置,建立基于规则的工作流引擎服务,工作流模板定义设计,工作流环节配置及工作流自动发送配置设计
            </div>
            <a-divider />
            <div class="stepArea-item-button">
              <div v-if="completeIndex >= 2" class="stepArea-item-button-label button-complete-color">已完成</div>
              <div v-else-if="completeIndex + 1 == 2" class="stepArea-item-button-label button-tocomplete-color">
                待完成
              </div>
              <div v-else class="stepArea-item-button-label button-incomplete-color">未完成</div>
              <a-icon class="stepArea-item-button-icon" type="right" />
            </div>
          </div>

          <!-- 步骤四 -->
          <div
            :class="completeIndex + 1 == 3 ? 'stepArea-item stepArea-item-border' : 'stepArea-item'"
            @click="start(3)"
          >
            <div class="stepArea-item-title">
              <img class="stepArea-item-name-img" src="@/assets/images/guide/release.png" />
              <div class="stepArea-item-title-name">流程发布</div>
            </div>
            <div class="stepArea-item-describe">
              流程发布,确定发布会目的，再结合产品本身定位以及时下热点，来最终确认发布会的主题
            </div>
            <a-divider />
            <div class="stepArea-item-button">
              <div v-if="completeIndex >= 3" class="stepArea-item-button-label button-complete-color">已完成</div>
              <div v-else-if="completeIndex + 1 == 3" class="stepArea-item-button-label button-tocomplete-color">
                待完成
              </div>
              <div v-else class="stepArea-item-button-label button-incomplete-color">未完成</div>
              <a-icon class="stepArea-item-button-icon" type="right" />
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import { editCheck, formStatistics } from '@/api/workflow/act_dsn_form_define.js'
import { YesNo } from '@/enumeration/YesNo.js'
export default {
  data() {
    return {
      loading: false, // 加载状态
      statistics: {}, // 统计结果
      YesNo: YesNo, // 是否的枚举
      completeIndex: -1, // 完成的步骤节点
      formDefine: {
        formedit: false, // 是否完成布局配置
        stepedit: false, // 是否完成环节配置
        publish: false // 是否发布流程
      },
      cardTitle: '', // 卡片标题
      current: 0
    }
  },
  created() {
    console.log('路由参数', this.$route.params)
    if (this.$route.params.operation == 'add') {
      this.cardTitle = '新流程配置'
    } else {
      this.cardTitle = '流程配置'
    }
    // 没有formid说明表单配置肯定没走完. 直接return
    if (this.$route.params.formid != 'undefined') {
      // 页面回显当前走到哪一步了
      this.findFormDefine(this.$route.params.formid)
    } else {
      // 新增直接到第二步
      this.completeIndex = 0
    }
  },
  methods: {
    formStatistics(modelKey) {
      this.loading = true
      let a = Date.now()
      formStatistics(modelKey)
        .then(res => {
          console.log('统计数据', res)
          if (res.code == 0) {
            this.statistics = res.data
          }
        })
        .finally(() => {
          this.animation(a)
        })
    },
    // 动画
    animation(a) {
      // 如果查询时间太短就给一个0.5秒的加载效果
      const b = Date.now()
      if (b - a < 300) {
        setTimeout(() => {
          this.loading = false
        }, 300)
      } else {
        this.loading = false
      }
    },
    findFormDefine(formid) {
      this.completeIndex = -1
      editCheck(formid).then(res => {
        if (res.code == 0) {
          // 已是否发布过为判断标准
          this.formDefine = res.data

          // 调用统计接口
          if (this.formDefine.key_) {
            this.formStatistics(this.formDefine.key_)
          }

          // 找到当前完成的最大环节节点
          console.log('res.data.publish', res.data.publish, this.YesNo[3200].value)
          if (res.data.publish == this.YesNo[3200].value) {
            this.completeIndex = 3
          } else if (res.data.stepedit == this.YesNo[3200].value) {
            this.completeIndex = 2
          } else if (res.data.formedit == this.YesNo[3200].value) {
            this.completeIndex = 1
          } else if (res.data.modeledit) {
            this.completeIndex = 0
          }
          // 发布过的情况步骤多一个
        }
        console.log('完成到第几步骤', res, this.completeIndex)
      })
    },
    back() {
      this.$router.push({ path: '/Wf_FormGuide' })
    },
    start(index) {
      // 要有表单定义id才能开始后面的环节

      if (index > this.completeIndex + 1) {
        this.$message.warning('请先完成前面的步骤')
        return
      }

      this.current = index
      // 跳转之前要校验之前的步骤是否都完成了

      if (this.current == 0) {
        if (!this.formDefine.key_) {
          this.$message.warning('请先在表单配置选择一个流程')
          return
        }
        this.$router.push({
          path: `/Wf_Picture/${this.formDefine.key_}/${
            this.formDefine.draft == this.YesNo[3201].value ? this.$route.params.formid : false
          }`
        })
      } else if (this.current == 1) {
        this.$router.push({
          path: `/Wf_FormAdd/${this.$route.params.operation}/${
            this.$route.params.formid == 'undefined' ? undefined : this.$route.params.formid
          }`
        })
      } else if (this.current == 2) {
        this.$router.push({ path: `/Wf_NodeGuide/${this.$route.params.operation}/${this.$route.params.formid}` })
      } else if (this.current == 3) {
        this.$router.push({ path: `/Wf_ProcessPublish/${this.formDefine.key_}/${this.$route.params.formid}` })
      }

      console.log('步骤', this.current)
    },
    prev() {
      this.current--
    },
    golist() {
      this.$router.push({ path: '/Wf_FormList' })
    }
  }
}
</script>

<style lang="less" scoped>
.spinBox {
  position: fixed;
  left: 45%;
  top: 20%;
}
.cardArea {
  background-color: #ffffff;
  padding: 28px;
  min-height: 745px;
}

.titleArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.titleArea-label {
  width: 3px;
  height: 17px;
  background-color: #5b79fb;
}

.titleArea-content {
  margin-left: 0.5%;
  font-size: 19px;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.tipsArea {
  background-color: #1890ff;
  border-radius: 28px;
  margin-top: 23px;
}

.tipsArea-content-add {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 25px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
}

.tipsArea-content-view-item {
  margin-left: 22px;
}

.stepArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.stepArea-item {
  margin-top: 44px;
  width: 352px;
  padding: 19px;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 10px 23px 4px rgba(15, 76, 187, 0.07);
  background-image: linear-gradient(180deg, #f6f6f6f6, #ffffff);
}

.stepArea-item-border {
  border: 2px solid #3b82f680;
}

.stepArea-item:hover {
  cursor: pointer;
}

.stepArea-item-title {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.stepArea-item-name-img {
  width: 49px;
  height: 53px;
}

.stepArea-item-title-name {
  margin-left: 14px;
  font-size: 20px;
  color: #000000;
  list-style: 11px;
}

.stepArea-item-describe {
  margin-top: 23px;
  font-size: 15px;
  color: #818080;
  line-height: 22px;
  min-height: 60px;
}

.stepArea-item-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.stepArea-item-button-label {
  font-size: 14px;
  line-height: 22px;
}

.button-complete-color {
  color: #2bb6f7;
}

.button-incomplete-color {
  color: #f97171;
}

.button-tocomplete-color {
  color: #f2a34b;
}

.stepArea-item-button-icon {
  font-size: 12px;
  color: #b4bcc0;
  margin-left: 6px;
}
</style>
